<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/iconfont.css" rel="stylesheet" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<style>
			#offCanvasSide{
				background: white;
			}
			#offCanvasSide .title,#offCanvasSide .content{
				color: #222222;
			}
			#offCanvasSide .content{
				min-height: 10em;
			}
			.test-add-div{
				height: 100px;
			}
			#index-menu-content .mui-icon{
				color: black;
			}
			.mui-card{
				box-shadow: 0 1px 2px rgba(0,0,0,.1);
			}
			.xq-card-like-list .mui-table-view-cell {
			    background-color: white;
			    margin-top: 0.25rem;
			    margin-bottom: 0.25rem;
			    border: 0;
			}
			/* .index-detail-list.mui-table-view{
				border-top: 1px solid rgba(0,0,0,0.1);
				border-radius: 0;
			} */
			.index-detail-list.mui-table-view .mui-table-view-cell{
				font-size: 1.1em;
				line-height: 1.5rem;
			}
			.index-detail-list.mui-table-view .mui-table-view-cell a{
				vertical-align: bottom;
				color: rgba(0,0,0,0.65);
			}
			.index-detail-list.mui-table-view .mui-table-view-cell:after{
				height: 0;
			}
			/* .mui-card-content{
				background-repeat: round;
			} */
			.list-name{
				padding: 0.5rem 0.25rem;
				text-align: center;
				color: #777777;
			}
			.mui-card-footer:before {
			    height: 0;
			}
			.mui-card-header.mui-card-media .mui-media-body p {
				width: 100%;
				white-space:nowrap;
			    overflow: hidden;
				text-overflow:ellipsis;
			}
			.btn-like-color{
				font-size: 0.875rem;
				margin-right: 0.2rem;
				color: #007aff;
			}
			.shiwen-card-title{
				font-weight: bold;
				color: #555555;
			}
			.shiwen-short-content{
				text-overflow: -o-ellipsis-lastline;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 2;
			    line-clamp: 2;
			    -webkit-box-orient: vertical;
			}
			.gushiwen-tag-list-content li{
				background: #f9f9f9;
			}
			#index-discover-content .mui-card{
				margin-bottom: 4px;
			}
			#index-discover-content .mui-card-content{
				margin: 8px;
				border: 1px solid rgba(0,0,0,0.1);
				height: 5rem;
			}
			.index-detail-list{
				margin-left: 5px;
				margin-right: 5px;
			}
			.index-detail-list .mui-card{
				margin-left: 5px;
				margin-right: 5px;
				margin-bottom: 4px;
			}
			.sub-content-title {
			    margin-left: 6px;
			    margin-right: 6px;
				padding-bottom: 0;
				margin-bottom: -3px;
			}
			.discover-img{
				object-fit: cover;
				height: 78px;
				width: 100%;
				opacity: 0.9;
			}
			.privalage-comfirm-dlg{
				text-align: left;
			}
			.mui-popup-button{
				color: #4e9ef6;
			}
			.mui-popup-button.mui-popup-button-bold{
				color: #1283ff;
			}
			.low-float-card{
				box-shadow: 0px 1px 3px rgba(0,0,0,0.05);
			}
		</style>
	</head>
	<body>
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="title">应用简介</div>
						<div class="content">
							该软件是一款阅读古诗词 古文章的app。<br/>
						&nbsp;&nbsp;&nbsp;&nbsp;
						    目前已经包含了古诗词 古文章的内容信息，作者信息，大部分诗词文章的注解 释义等内容。<br/>	
						</div>
						<div class="title" style="margin-bottom: 25px;">系统菜单</div>
						<!--mui-table-view-inverted-->
						<ul class="mui-table-view mui-table-view-chevron " id="index-menu-content">
							<li class="mui-table-view-cell" to-page='ilikeListPage'>
								<div class="mui-navigate-right">
									<a class="mui-icon mui-icon-star"></a>
									我的收藏
								</div>
							</li>
							<li class="mui-table-view-cell" to-page='historyInfoPage'>
								<div class="mui-navigate-right">
									<a class="mui-icon mui-icon-map"></a>
									浏览历史
								</div>
							</li>
							<li class="mui-table-view-cell" to-page='settingPage'>
								<div class="mui-navigate-right">
									<a class="mui-icon mui-icon-gear"></a>
									设置
								</div>
							</li>
							<li class="mui-table-view-cell" to-page='aboutPage'>
								<div class="mui-navigate-right">
									<a class="mui-icon mui-icon-compose"></a>
									关于
								</div>
							</li>
						</ul>
					</div>
				</div>
			</aside>
			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<header class="mui-bar mui-bar-nav">
					<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
					<h1 class="mui-title">首页</h1>
					<a class="mui-icon mui-icon-search mui-pull-right" id="search-btn"></a>
				</header>
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-content">
							<div class="xq-home-top-img-content" id="index-random-sentence-content">
								<div class="bg-content" fill-id style="background-color: #88ada6">
									<div class="xq-sentence" show-name="name"></div>
									<div class="xq-sentence-from" show-name="from"></div>
									<img src='images/card-little-bg001.png'>
								</div>
							</div>
							<div class="">
								<div class="xq-padding-content sub-content-title" style="margin-top: 4px;">
									导航
									<!-- <div class="xq-float-righ btn-like-color">更多</div>
									<div class="xq-clean-both"></div> -->
								</div>
							    <div class="mui-row index-detail-list">
							        <div class="mui-col-xs-4">
							            <div class="mui-card" to-page='tagNavPage'>
							            	<!--内容区-->
							            	<div class="mui-card-content mui-card-media xq-nav-crd-pic-content">
											<img src="./images/list-pic006.jpg" class="xq-nav-crd-pic">
											</div>
							            	<!--页脚，放置补充信息或支持的操作-->
							            	<div class="mui-card-content list-name">标签列表</div>
							            </div>
							        </div>
									<div class="mui-col-xs-4">
									    <div class="mui-card" to-page='allWriterList'>
									    	<!--内容区-->
									    	<div class="mui-card-content mui-card-media xq-nav-crd-pic-content">
											<img src="./images/list-pic009.jpg" class="xq-nav-crd-pic">
											</div>
									    	<!--页脚，放置补充信息或支持的操作-->
									    	<div class="mui-card-content list-name">作者列表</div>
									    </div>
									</div>
									<div class="mui-col-xs-4">
									    <div class="mui-card" to-page='allGushiwenList'>
									    	<!--内容区-->
									    	<div class="mui-card-content mui-card-media xq-nav-crd-pic-content">
											<img src="./images/list-pic007.jpg" class="xq-nav-crd-pic">
											</div>
									    	<!--页脚，放置补充信息或支持的操作-->
									    	<div class="mui-card-content list-name">诗文列表</div>
									    </div>
									</div>
							    </div>
							</div>
							<div id="index-discover-content">
								<div v-if="indexDiscover.show">
									<div class="xq-padding-content sub-content-title">
										发现
										<!-- <div class="xq-float-righ btn-like-color">更多</div>
										<div class="xq-clean-both"></div> -->
									</div>
									<div  class="mui-card" >
										<div v-if="indexDiscover.msxiaobingPoem.show"
										class="mui-card-content mui-card-media low-float-card" to-page='msxiaobingPoem'>
										<img src="./images/msxiaobing-poem.jpg" class="discover-img">
										</div>
										<div class="mui-card-content mui-card-media low-float-card" to-page='cardMaker'>
										<img src="./images/xiaoggongju-cardmaker.jpg" class="discover-img">
										</div>
									</div>
								</div>
							</div>
							<div id="index-recommend-content">
								<div class="xq-padding-content sub-content-title">
									推荐
									<div id="recommend-list-refresh" class="xq-float-righ btn-like-color">换一批</div>
									<div class="xq-clean-both"></div>
								</div>
								<div v-for="(itemInfo,index) in recommendList" :index="index"  class="mui-card">
									<!--页眉，放置标题-->
									<div class="mui-card-header mui-card-media" :writer-id="itemInfo.gushiwenWriterVo.id">
										<img :src="itemInfo.gushiwenWriterVo.headImageUrl" class="xq-circle-img"/>
										<div class="mui-media-body">
											{{itemInfo.gushiwenVo.writer}}
											<p>{{itemInfo.gushiwenVo.dynasty}} {{itemInfo.gushiwenWriterVo.simpleIntro}}</p>
										</div>
									</div>
									<!--内容区-->
									<div v-if="itemInfo.gushiwenVo.mainImg" class="mui-card-content mui-card-media" 
									:style="itemInfo.gushiwenVo.bgStyle">
									</div>
									<div class="mui-card-content" :shiwen-id="itemInfo.gushiwenVo.id">
										<div class="xq-padding-content"  style="text-align: center;font-size: 1rem;line-height: 2rem;">
											<div class="shiwen-card-title">{{itemInfo.gushiwenVo.title}}</div>
											<div class="shiwen-short-content" v-html="itemInfo.gushiwenVo.shortContent"></div>
										</div>
									</div>
									<!--页脚，放置补充信息或支持的操作-->
									<div class="mui-card-footer">
										<ul class="gushiwen-tag-list-content">
											<li v-for="(tagInfo,index) in itemInfo.gushiwenVo.tagList" :index="index" 
											:tag-id="tagInfo.tagId" :tag-name="tagInfo.tagName">{{tagInfo.tagName}}</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
		
					</div>
				</div>
				<!-- off-canvas backdrop -->
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/vue-2.3.3.js"></script>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/commonUtils.js"></script>
		<script src="js/indexDiscoverManager.js"></script>
		<script src="js/indexRecommendManager.js"></script>
		<script type="text/javascript" charset="utf-8">
			var currentSentence={};
			var gridCardDataMap={};
			var offCanvasContentScroll=null;
			var loadRandomInterval=null;
			mui.init();
			
			//实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
			//
			mui.ready(function() {
				if (mui.os.plus) {
					return;
				}
				initIndexPage();
			});
			mui.plusReady(function() {
				plus.navigator.setStatusBarStyle('dark');
				plus.navigator.setStatusBarBackground('#FFFFFF');
				SettingInfoManager.loaclToPlusStorage();
				//
				$('body').on('tap','.toPrivaligePage',function(e){
					var timestamp=new Date().getTime();
					mui.openWindow({
						url: 'pages/remotePageIframe.html?timestamp='+timestamp,
						id: 'pages/remotePageIframe.html-'+timestamp,
						extras:{
							title : '服务及隐私条款',
							toPageUrl : '/pages/yinsi.html'
						}
					})
				})
				//checkConfirmPrivalige();
				initIndexPage();
			});
			

			function initIndexPage() {
				//
				SettingInfoManager.timeCheckAndSetPageFontFromSetting("index");
				
				//主界面和侧滑菜单界面均支持区域滚动；
				mui('#offCanvasSideScroll').scroll();
				offCanvasContentScroll=new RefreshAbleScroll("#offCanvasContentScroll",{
					up:{
						enabled:false
					},
					down:{
						enabled:true,
						detHeight:50,
						detDelayTime:500,
						loadFunction:function(that){
							commonUtils.showLoading("刷新中...");
							setTimeout(function(){commonUtils.hideLoading(function(){})},1000);
							loadRandomSentence();
							refreshIndexRecommendList(indexRecommendManager);
							that.loading=false;
						}
					}
				});
				offCanvasContentScroll.init();
				//菜单点击事件
				$('#index-menu-content').on('tap','li',function(){
					var liEle=$(this).closest('li');
					if($(liEle).is('[to-page]') && $(liEle).attr('to-page')){
						var funcVal=$(liEle).attr('to-page');
						mui.openWindowWithTitle({
							url: 'pages/'+funcVal+'.html',
							id: funcVal+'.html'
						});
					}
				});
				//导航点击事件
				$('.index-detail-list').on('tap','.mui-card',function(){
					openCardToPageWindow(this);
				});
				//
				$("#offCanvasContentScroll").on("swipeleft",function(){
					mui.openWindowWithTitle({
						url: 'pages/searchPage.html',
						id: 'searchPage.html'
					});
				});
				//
				$("#search-btn").on('tap',function(e){
					mui.openWindowWithTitle({
						url: 'pages/searchPage.html',
						id: 'searchPage.html'
					});
				});
				//
				$('#index-random-sentence-content').on('tap','[fill-id]',function(e){
					var fillId=$(this).attr('fill-id');
					if(fillId){
						mui.openWindowWithTitle({
							url: 'pages/sentenceRandomCard.html?id=' + fillId,
							id: 'sentenceRandomCard.html-id-' + fillId,
							extras: {
								infoId: fillId,
								sentence:JSON.stringify(currentSentence)
							}
						});
					}
				});
				//
				loadRandomSentence();
				if(loadRandomInterval==null){
					setInterval(function(){
						loadRandomSentence();
					},15000);
				}
				//
				var indexDiscoverManager=new IndexDiscoverManager();
				indexDiscoverManager.init();
				//
				var indexRecommendManager = new IndexRecommendManager();
				indexRecommendManager.init({
					loadOver:function(){
						offCanvasContentScroll.scroll.refresh();
					}
				});
				//
				$("#recommend-list-refresh").on('tap',function(e){
					refreshIndexRecommendList(indexRecommendManager);
				});
			}
			
			function refreshIndexRecommendList(indexRecommendManager){
				//currentRecommendPage1=1;
				indexRecommendManager.loadRecommendList();
			}
			
			function openCardToPageWindow(that){
				var liEle=$(that).closest('.mui-card');
				if($(liEle).is('[to-page]') && $(liEle).attr('to-page')){
					var funcVal=$(liEle).attr('to-page');
					mui.openWindow({
						url: 'pages/'+funcVal+'.html',
						id: funcVal+'.html'
					});
				}
			}


			function loadRandomSentence() {
				var sentenceContentSel = '#index-random-sentence-content';
				var url = getShiciServiceHost() + '/shici/sentence/random';
				muiAjaxGetJsonData({
					url: url,
					data: {},
					callback: function(data) {
						if (!data.entry) {
							return;
						}
						currentSentence=data.entry;
						fillDataToTpl($(sentenceContentSel), data.entry);
					}
				});
			}
			
			function checkConfirmPrivalige(){
				var  confirmResult=SettingInfoManager.getPrivilageConfirmResult();
				if(!confirmResult || confirmResult=='N'){
					var msg = "<div class='privalage-comfirm-dlg'>"
					+"请你务必审慎阅读、充分理解“服务及隐私协议”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能！"
					+"你可阅读<a class='toPrivaligePage'> <<服务及隐私协议>> </a>了解详细信息！"
					+"如果你同意，请点击下面按钮开始接受我们的服务。</div>";
					mui.confirm(msg,"服务及隐私协议",['不同意','同意'],function(e){
						if (e.index == 1) {
							SettingInfoManager.setPrivilageConfirmResult("Y");
						} else {
							setTimeout(function(){
								reNotifyConfirmPrivalige();
							},50);
						}
					},'div');
				}
			}
			
			function reNotifyConfirmPrivalige(){
				var  confirmResult=SettingInfoManager.getPrivilageConfirmResult();
				if(!confirmResult || confirmResult=='N'){
					var msg = ""
					+ "如果您不同意我们的服务及隐私协议我们将无法为您提供服务！希望您能再看看！！！";
					+ "";
					mui.confirm(msg,"提醒",['退出应用','我再看看'],function(e){
						if (e.index == 1) {
							setTimeout(function(){
								checkConfirmPrivalige();
							},50);
						}else{
							plus.runtime.quit();
						}
					},'div');
				}
			}
		</script>
	</body>
</html>
